<script setup>
import { onMounted, ref } from 'vue';
import {
	apiGetMyActivityList,
	apiCancelVolunteerActivity
} from '../../api/volunteer.js';
const items = ref(['待录取', '待开展', '开展中','已完成']);
const current = ref(0);
const colorIndex = ref(0);
const activeColor = ref('#007aff');
const styleType = ref('text');
const dataZero = ref({
	currentPage: '1',
	pageSize: '999',
	status: '0'
})
const dataOne = ref({
	currentPage: '1',
	pageSize: '999',
	status: '1'
})
const dataTwo = ref({
	currentPage: '1',
	pageSize: '999',
	status: '2'
})
const dataThree = ref({
	currentPage: '1',
	pageSize: '999',
	status: '3'
})

let activitiesZero = ref('')
let activitiesOne = ref('')
let activitiesTwo = ref('')
let activitiesThree = ref('')
let isLoading = ref(true)
let searchContent = ref('')
let searchZero = ref('')
let searchOne = ref('')
let searchTwo = ref('')
let searchThree = ref('')
let keyvalue = ref(0)
onMounted(async () => {
	// uni.request({
	// 	url: '/applet/user/activity/myActivityPage',
	// 	method: 'GET',
	// 	data: {
	// 		currentPage: data.value.currentPage,
	// 		pageSize: data.value.pageSize,
	// 		status: data.value.status
	// 	},
		
	// 	success: function (res) {
	// 		console.log(res)
	// 		activitiesZero = res.data.data.records
	// 		console.log(activitiesZero)
	// 		isLoading.value = false
	// 	},
	// 	fail: function(err) {
	// 		console.log(err)
	// 	}
	// })
	const responseZero = await apiGetMyActivityList(dataZero.value)
	console.log("responseZero",responseZero)
	activitiesZero = responseZero.data.records
	searchZero = ref(activitiesZero)
	console.log("searchZer",searchZero)
	console.log("zero",activitiesZero)  
	
	const responseOne = await apiGetMyActivityList(dataOne.value)
	console.log("responseOne",responseOne)
	activitiesOne = responseOne.data.records
	searchOne = ref(activitiesOne)
	console.log("searchOne",searchOne)
	console.log("One",activitiesOne)  
	
	const responseTwo = await apiGetMyActivityList(dataTwo.value)
	console.log("responseTwo",responseTwo)
	activitiesTwo = responseTwo.data.records
	searchTwo = ref(activitiesTwo)
	console.log("searchTwo",searchTwo)
	console.log("Two",activitiesTwo)  
	
	const responseThree = await apiGetMyActivityList(dataThree.value)
	console.log("responseThree",responseThree)
	activitiesThree = responseThree.data.records
	searchThree = ref(activitiesThree)
	console.log("searchThree",searchThree)
	console.log("Three",activitiesThree)  
	
	
	if (responseZero.code === 1) {
		isLoading.value = false
	}
})

const onClickItem = async (e) => {
    if (current.value!== e.currentIndex) {
        current.value = e.currentIndex;
    }
	console.log(current.value)
	if (current.value === 0 && activitiesZero.length === 0) {
		uni.showToast({
		    title: '暂无此类活动',
		    icon: 'none',
		    duration: 2000,
		    mask: true,
		});
	}
	if (current.value === 1 && activitiesOne.length === 0) {
		uni.showToast({
		    title: '暂无此类活动',
		    icon: 'none',
		    duration: 500,
		    mask: true,
		});
	}
	if (current.value === 2 && activitiesTwo.length === 0) {
		uni.showToast({
		    title: '暂无此类活动',
		    icon: 'none',
		    duration: 500,
		    mask: true,
		});
	}
	if (current.value === 3 && activitiesThree.length === 0) {
		uni.showToast({
		    title: '暂无此类活动',
		    icon: 'none',
		    duration: 500,
		    mask: true,
		});
	}
};

const goBack = () => {
	// uni.switchTab({
	// 	url: '/pages/individual/individual'
	// })
	// console.log("activitiesZero",activitiesZero)
	// console.log("searchZero",searchZero)
	console.log("点击了返回")
	const canNavBack = getCurrentPages();
	if (canNavBack && canNavBack.length > 1) {
		uni.navigateBack({
			delta: 1
		});
	} else {
		uni.reLaunch({
			url: '/pages/individual/individual'
		});
	}
}


const search = () => {
	if (current.value === 0 && searchContent.value != '') {
		searchZero = ref([])
		activitiesZero.forEach((item) => {
			// console.log(item)
			if (item.activityName.includes(searchContent.value)) {
				console.log(item)
				searchZero.value.push(item)
			}
		})
		console.log(searchZero)
		console.log(keyvalue)
		keyvalue.value = keyvalue.value + 1
		console.log(keyvalue)
	} else if (current.value === 0 && searchContent.value === '') {
		searchZero = ref(activitiesZero)
		keyvalue.value = keyvalue.value + 1
	}
	
	if (current.value === 1 && searchContent.value != '') {
		searchOne = ref([])
		activitiesOne.forEach((item) => {
			// console.log(item)
			if (item.activityName.includes(searchContent.value)) {
				console.log(item)
				searchOne.value.push(item)
			}
		})
		console.log(searchOne)
		console.log(keyvalue)
		keyvalue.value = keyvalue.value + 1
		console.log(keyvalue)
	} else if (current.value === 1 && searchContent.value === '') {
		searchOne = ref(activitiesOne)
		keyvalue.value = keyvalue.value + 1
	}
	
	if (current.value === 2 && searchContent.value != '') {
		searchTwo = ref([])
		activitiesTwo.forEach((item) => {
			// console.log(item)
			if (item.activityName.includes(searchContent.value)) {
				console.log(item)
				searchTwo.value.push(item)
			}
		})
		console.log(searchTwo)
		console.log(keyvalue)
		keyvalue.value = keyvalue.value + 1
		console.log(keyvalue)
	} else if (current.value === 2 && searchContent.value === '') {
		searchTwo = ref(activitiesTwo)
		keyvalue.value = keyvalue.value + 1
	}
	
	if (current.value === 3 && searchContent.value != '') {
		searchThree = ref([])
		activitiesThree.forEach((item) => {
			// console.log(item)
			if (item.activityName.includes(searchContent.value)) {
				console.log(item)
				searchThree.value.push(item)
			}
		})
		console.log(searchThree)
		console.log(keyvalue)
		keyvalue.value = keyvalue.value + 1
		console.log(keyvalue)
	} else if (current.value === 3 && searchContent.value === '') {
		searchThree = ref(activitiesThree)
		keyvalue.value = keyvalue.value + 1
	}
}

const cancelRegister = async(id) => {
	let response = ref('')
	uni.showModal({
		title: '提示',
		content: '是否取消报名',
		success: async function (res) {
			if (res.confirm) {
				response = await apiCancelVolunteerActivity(id)
				console.log("res====",response)
				if (current.value === 1) {
					if (response.code === 1) {
						const newSearch = searchOne.value.filter(item => item.id != id)
						searchOne = ref(newSearch)
						keyvalue.value = keyvalue.value + 1
						uni.showToast({
							title: '成功取消', 
							icon: 'success', 
							duration: 1000, 
						})
					} else {
						uni.showToast({
							title: response.data, 
							icon: 'error', 
							duration: 1000, 
						})
					}
				}
				
				if (current.value === 0) {
					if (response.code === 1) {
						const newSearch = searchZero.value.filter(item => item.id != id)
						searchZero = ref(newSearch)
						keyvalue.value = keyvalue.value + 1
						uni.showToast({
							title: '成功取消', 
							icon: 'success', 
							duration: 1000, 
						})
					} else {
						uni.showToast({
							title: response.data, 
							icon: 'error', 
							duration: 1000, 
						})
					}
				}
			}
		}
	})
}
</script>

<template>
	<view v-if="isLoading">
		<!-- 使用绝对定位的遮罩层来实现背景变暗 -->
		<!-- <view class="loading-mask"></view> -->
		<!-- 旋转等待小窗口 -->
		<view v-if="isLoading" class="loading-window">
		  <view class="spinner"></view>
		  <text>正在加载...</text>
		</view>
	</view>
	<view class="custom-navbar">
		<view class="back-icon" @click="goBack()">
			<img src="../../static/民族风-返回.png" alt="" class="icon" />
		</view>
		<text class="custom-title">我的活动</text>
	</view>
	<view style="margin-top: 200rpx;">
		<uni-section title="实心标签" type="line">
			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" />
			</view>
			<view class="SearchPart">
				<view class="search">
					<uni-easyinput prefixIcon="search" v-model="searchContent" placeholder="请输入内容"></uni-easyinput>
				</view>
				<button class="search-button" @click="search()">搜索</button>
			</view>
				<view v-if="current === 0">
					<view class="mainContent">
						<scroll-view class="scroll1" scroll-y="true">
							<view class="content-list" :key=keyvalue>
								<view class="content-item" v-for="(item,index) in searchZero" :key="index">
<!-- 									<span class="label">
										科普活动
									</span>
									<span class="label">
										科普活动
									</span> -->
									<span class="item-number" @click="cancelRegister(item.id)">取消报名</span>
									<p class="item-name">活动名称： {{item.activityName}}</p>
									<p class="item-organization">活动地点： {{item.activityLocation}}</p>
									<p class="item-organization">活动对象： {{item.recruitmentPositions}}</p>
									<view class="item-bottom">
										<span class="item-time">{{item.beginTime}}-{{item.endTime}} </span>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view v-if="current === 1">
					<view class="mainContent">
						<scroll-view class="scroll1" scroll-y="true">
							<view class="content-list" :key=keyvalue>
								<view class="content-item" v-for="(item,index) in searchOne" :key="index">
									<span class="label">
										科普活动
									</span>
									<span class="label">
										科普活动
									</span>
									<span class="item-number" @click="cancelRegister(item.id)">取消报名</span>
									<p class="item-name">活动名称： {{item.activityName}}</p>
									<p class="item-organization">活动地点： {{item.activityLocation}}</p>
									<view class="item-bottom">
										<span class="item-time">{{item.beginTime}}-{{item.endTime}} </span>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view v-if="current === 2">
					<view class="mainContent">
						<scroll-view class="scroll1" scroll-y="true">
							<view class="content-list" :key=keyvalue>
								<view class="content-item" v-for="(item,index) in searchTwo" :key="index">
									<span class="label">
										科普活动
									</span>
									<span class="label">
										科普活动
									</span>
									<p class="item-name">活动名称： {{item.activityName}}</p>
									<p class="item-organization">活动地点： {{item.activityLocation}}</p>
									<view class="item-bottom">
										<span class="item-time">{{item.beginTime}}-{{item.endTime}} </span>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view v-if="current === 3">
					<view class="mainContent">
						<scroll-view class="scroll1" scroll-y="true">
							<view class="content-list" :key=keyvalue>
								<view class="content-item" v-for="(item,index) in searchThree" :key="index">
									<span class="label">
										科普活动
									</span>
									<span class="label">
										科普活动
									</span>
									<p class="item-name">活动名称： {{item.activityName}}</p>
									<p class="item-organization">活动地点： {{item.activityLocation}}</p>
									<view class="item-bottom">
										<span class="item-time">{{item.beginTime}}-{{item.endTime}} </span>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
		</uni-section>
	</view>
</template>

<style lang="scss" scoped>
	.loading-window {
	  padding: 20px;
	  text-align: center;
	  font-size: 16px;
	  font-weight: bold;
	  background-color: rgba(0, 0, 0, 0.7);
	  color: #fff;
	  border-radius: 5px;
	  position: fixed;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  z-index: 1000; /* 确保加载窗口在其他内容之上 */
	}
	 
	.spinner {
	  width: 70rpx;
	  height: 70rpx;
	  border: 2px solid rgba(255, 255, 255, 0.3);
	  border-left-color: #fff;
	  border-radius: 50%;
	  margin-left: 35rpx;
	  animation: spin 1s linear infinite;
	  margin-bottom: 8px; /* 给文本一些间距 */
	}
	 
	@keyframes spin {
	  from {
	    transform: rotate(0deg);
	  }
	  to {
	    transform: rotate(360deg);
	  }
	}
	
	/* 遮罩层样式，用于背景变暗 */
	.loading-mask {
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background-color: rgba(0, 0, 0, 0.5);
	    z-index: 9;
	}
	
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 0;
	}

	.uni-common-mt {
		margin-top: -25rpx;
		border-bottom: #b1b1b0 solid 1rpx;
	}

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 30px;
	}

	.content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		height: 150px;
		text-align: center;
	}

	.content-text {
		font-size: 14px;
		color: #666;
	}

	.color-tag {
		width: 25px;
		height: 25px;
	}

	.uni-list {
		flex: 1;
	}

	.uni-list-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		background-color: #FFFFFF;
	}


	.uni-list-item__container {
		padding: 12px 15px;
		width: 100%;
		flex: 1;
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: #eee;
	}

	.uni-list-item__content-title {
		font-size: 14px;
	}
	
	.custom-navbar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 80px;
		/* 导航栏高度 */
		background-color: #00BFFF;
		display: flex;
	
		justify-content: center;
		color: white;
		z-index: 999;
	
	}
	
	.icon {
		position: absolute;
		height: 80rpx;
		width: 80rpx;
		margin-top: 40px;
		margin-left: 10px;
	
	}
	
	.custom-title {
		font-size: 20px;
		/* 设置你想要的大小 */
		margin-top: 45px;
		font-weight: bold;
		margin-left: auto;
		/* 使标题向右对齐 */
		margin-right: auto;
		/* 使标题向左对齐，与 margin-left: auto 配合实现居中 */
	}
	
	.SearchPart {
		width: 100%;
		display: flex;
		margin-top: -10rpx;
	}
	
	.search-button {
		position: relative;
		width: 20%;
		height: 37px;
		border-radius: 5px;
		bottom: -15px;
		line-height: 34px;
		margin-left: 5px;			
		padding: 1px;
		border: #b1b1b0 solid 1px;
		font-weight: 400;
		font-size: 18px;
		color: gray;		
	}
	
	.search {
		padding: 10rpx 20rpx;
		margin-bottom: 10px;
		margin-top: 10px;
		width: 70%;
	}
	
	.mainContent {
		padding: 30rpx;
		background-color: #f1f1f1;
		width: 100%;
		height: 100vh;
		position: fixed;
	
		.scroll1 {
			margin-top: 15rpx;
			height: 70vh;
			align-items: center;
			width: 95%;
			/* border: gray solid 2px; */
			background: transparent;
			position: fixed;
		}
	
		.content-list {
			width: 98%;
			display: flex;
			flex-direction: column;
			align-items: center;
			overflow: hidden;
			border-radius: 30rpx;
	
			.content-item {
				width: 100%;
				height: 100%;
				background-color: #FFFFFF;
				margin-bottom: 4rpx;
				padding: 30rpx 40rpx;
				box-sizing: border-box;
				border-radius: 10px;
	
				.label {
					width: 100rpx;
					height: 40rpx;
					background-color: #FFECF0;
					border-radius: 20rpx;
					text-align: center;
					line-height: 40rpx;
					color: #FB4457;
					font-size: 24rpx;
					padding: 10rpx 20rpx;
					margin-right: 20rpx;
	
				}
	
				.item-number {
					font-size: 26rpx;
					color: #FB4457;
					float: right;
	
	
				}
	
				.item-name {
					font-size: 34rpx;
					font-weight: bold;
					color: #000000e6;
					margin-top: 20rpx;
					margin-bottom: 10rpx;
	
				}
	
				.item-organization {
					font-size: 28rpx;
					color: #0006;
					margin-bottom: 10rpx;
	
				}
	
				.item-bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 10rpx;
					color: #0006;
					font-size: 24rpx;
	
				}
			}
		}
	
	}
	
	
</style>

